import React from 'react';
import {withRouter} from 'react-router-dom';
import { connect } from 'react-redux';
import { Button } from 'antd';
import Qs from 'qs';
import { queryInfo } from '../../api/candidate';
import action from '../../store/action/index';
import StatusIcon from '../../component/StatusIcon'
import {
    ContactsOutlined,
    PhoneOutlined,
    MailOutlined,
    MessageOutlined,
    CalendarOutlined,
    FileAddOutlined,
    FormOutlined
} from '@ant-design/icons';

class Info extends React.Component {
    constructor(props, context) {
        super(props, context);
        this.state = {
            data: null,
        };
    }

    async componentDidMount() {
        let { location: { search } } = this.props,
            { candidateId = 0 } = Qs.parse(search.substr(1)) || {};
        this.candidateId = candidateId;
        // this.candidateId = this.props.match.params.id;
        let result = await queryInfo(this.candidateId);
        if (parseFloat(result.code) === 0) {
            this.setState({
                data: result.data,
            });
        }
    }

    render() {
        let { data } = this.state;
        if (!data) return 'contact not found, please check!';

        return <div className='baseInfo'>
            <div className='title'>
                <div className="avatarInfo">
                    <ContactsOutlined className="avatar" />
                    <div>
                        <h1>{data.name}</h1>
                        <StatusIcon status="New" />
                        <div>
                            <StatusIcon status="Open" />
                        </div>
                    </div>
                </div>
                <div className="actionList">
                    <PhoneOutlined />
                    <MailOutlined />
                    <MessageOutlined />
                    <CalendarOutlined />
                    <FileAddOutlined />
                </div>
            </div>
            <div className="containerDiv">
                <div className="head">
                    <span className="title">
                        Contact Detail
                    </span>
                    <span className="action">
                        Edit
                    </span>
                </div>
                <div className="content">
                    <div className="row">
                        <div>Email:</div>
                        <p>{data.email}</p>
                    </div>
                    <div className="row">
                        <div>Phone:</div>
                        <p>{data.phone}</p>
                    </div>
                </div>
            </div>
            <div className="containerDiv">
                <div className="head">
                    <h2 className="title">
                        Activities
                    </h2>
                </div>
                <div className="content">
                    <div className="row">
                        <div><FormOutlined className="icon" /></div>
                        <div className="content">
                            <p>Form filled</p>
                            <p className="dateP">{data.created_at}</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>;
    }
}

export default withRouter(connect(state => state.candidate, action.candidate)(Info));